<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 21:21:24
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-29 17:37:28
 * @Description: 
-->
<template>
  <div class="header">
    <div class="logo">
      <img :src="Logo" alt="" />

      <el-button @click="menuStore.changeIsCollapse" link :size="80" :icon="menuStore.icon" style="font-size:30px"></el-button>
    </div>
    <el-dropdown>
      <el-avatar :src="user.avatar"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="toSetting">账户设置</el-dropdown-item>
          <el-dropdown-item divided @click="loginOut"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed,onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores";
import { useMenuStore } from "@/stores/menu.js";
import { useRouter } from "vue-router";
import { admin } from "@/api";
import Logo from "@/assets/img/阿里巴巴字体.svg";

const userStore = useUserStore();
const menuStore = useMenuStore();
onMounted(()=>{
   // 加载当前用户资料
   userStore.loadProfile(sessionStorage.id)
})

const router = useRouter();
const user = computed(()=>{
   return userStore.data
})

const toSetting = () => {
  router.push({ name: "userInfo" });
};
// 退出登录
const loginOut = () => {
  sessionStorage.clear();
  router.push({ name: "Login" });
};
</script>

<style lang='less' scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.logo {
  img {
    height: 40px;
  }
}
</style>
